<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes head{
            from{
                width:0;
            }
            to{
                width:200px;
            }
        }
        .black{
            width: 200px;
            height: 30px;
            margin-bottom: 5px;
            background-color: rgb(220, 220, 220);
            position: relative;
        }
        .black::after{
            content: "";
            display:block;
            width: 0;
            height:30px;
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
            animation:head 4s ease-in-out 1s infinite;
        }
        .linear{
            width: 200px;
            height: 30px;
            margin-bottom: 5px;
            border-radius:15px;
            position: relative;
            overflow: hidden;
        }
        .linear::after{
            content: "";
            display:block;
            width: 0;
            height:30px;
            background:linear-gradient(to right,rgb(248, 112, 135) 35%,aqua);
            position: absolute;
            top: 0;
            left: 0;
            animation:head 2s ease 1s infinite backwards;
        }
        .lineare{
            width: 200px;
            height: 30px;
            margin-bottom: 5px;
            border-radius:15px;
            overflow: hidden;
            background:repeating-linear-gradient(45deg,grey 0 20px,white 0 35px);
            position: relative;
        }
        .lineare::after{
            content: "";
            display:block;
            width: 0;
            height:30px;
            background:repeating-linear-gradient(45deg,pink 0 20px,blue 0 35px) ;
            position: absolute;
            top: 0;
            left: 0;
            animation:head 2s ease-out 1s infinite;
        }

        .linearer{
            width: 200px;
            height: 30px;
            margin-bottom: 5px;
            border-radius:15px;
            overflow: hidden;
            background:repeating-linear-gradient(45deg,red 0 20px,yellow 0 35px) no-repeat 0/0%,repeating-linear-gradient(45deg,grey 0 20px,white 0 35px) no-repeat 0/100%;
            animation:hea 2s linear 1s infinite;
            /* position: relative; */
        }
        @keyframes hea{
            100%{
                background-size:100%;
            }
        }
        /* .linearer::after{
            content: "";
            display:block;
            width: 0;
            height:30px;
            background:repeating-linear-gradient(45deg,pink 0 20px,blue 0 35px) ;
            position: absolute;
            top: 0;
            left: 0;
            animation:head 2s ease-out 1s infinite;
        } */
        .lin{
            width: 198px;
            height: 30px;
            overflow: hidden;
            background:repeating-linear-gradient(90deg,gray 0px 25px,#fff 0px 40px);
            position: relative;
        }
        .lin::after{
            content: "";
            display: block;
            width: 0;
            height: 30px;
            background:repeating-linear-gradient(90deg,black 0px 25px,#fff 0px 40px);
            position: absolute;
            top: 0;
            left: 0;
            animation: lin 5s steps(6) infinite;
        }
        @keyframes lin{
            /* 0%{
                width: 0;
            } */
            100%{
                width: 120%;
            }
        }
        .line{
            width: 198px;
            height: 30px;
            border-radius: 15px;
            margin-top:10px ;
            border: 2px solid red;
            background: repeating-linear-gradient(90deg,blue 0 25px,#fff 25px 40px) no-repeat 0/0%,repeating-linear-gradient(90deg,gray 0 25px,#fff 25px 40px) no-repeat 0/100%;
            animation: on 5s steps(6) infinite;
        }
         @keyframes on{
            100%{            
                background-size:120%;
            }

         }
    </style>
</head>
<body>
    <div class="black"></div>
    <div class="linear"></div>
    <div class="lineare"></div>
    <div class="linearer"></div>
    <div class="lin"></div>
    <div class="line"></div>
</body>
</html>